<!--
 * @Date: 2023-03-24 15:48:18
 * @LastEditTime: 2023-04-28 09:54:50
-->
<template>
  <a-select
    class="langSelect"
    v-model:value="selectValue"
    @change="handleChange"
    :options="options"
  >
  </a-select>
</template>

<script setup>
import { getCurrentInstance, ref, reactive, onMounted, computed } from 'vue';
import { useCommonStore } from '@/store/index';

const instance = getCurrentInstance();
const { proxy } = instance;
const commonStore = useCommonStore();

const props = defineProps({ query: Object });

onMounted(() => {
  // selectValue.value = commonStore.language;
  projectString();
});

const projectString = () => {
  proxy.$api.projectString(props.query).then((res) => {
    if (res.code === 200) {
      const { project_info, string_info } = res.data;
      const { project_language, default_language_id } = project_info;

      selectValue.value = default_language_id;
      let defaultLanguage = {};
      project_language.forEach((item) => {
        const { language_id, language } = item;
        const temp = { value: language_id, label: language.language_name };
        language_id !== default_language_id
          ? options.push(temp)
          : (defaultLanguage = temp);
      });
      options.unshift(defaultLanguage);
    }
  });
};

const options = reactive([]);
const selectValue = ref(0);
const emits = defineEmits(['activeChange']);
const handleChange = (e) => {
  emits('activeChange', false);
  localStorage.setItem('language', e);
  commonStore.SET_LANG(e);

  proxy.$nextTick(() => {
    proxy.$api.expoDetail().then((res) => {
      if (res) {
        const temp = res.data,
          num = Math.round(Math.random() * 10);

        temp.expo_name = temp.expo_name + commonStore.language;

        instance.appContext.config.globalProperties.$details = temp;

        emits('activeChange', true);
      }
    });
  });
};
</script>

<style lang="less" scoped>
.langSelect {
  width: 120px;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
